<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo Mail Application</title>

    <script type="text/javascript" src="/dojoroot/dojo/dojo.js" 
            djConfig="parseOnLoad: true, isDebug: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");

        dojo.require("dijit.Toolbar");

        dojo.require("dijit.layout.LayoutContainer");
        dojo.require("dijit.layout.SplitContainer");
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dojo.data.ItemFileReadStore"); 
        dojo.require("dijit.Tree");
        
        dojo.require("dijit.form.Button"); //added
        dojo.require("dijit.Menu");//added
        dojo.require("dijit.Tooltip");//added
        dojo.require("dijit.Dialog");//added
        dojo.require("dijit.form.ComboBox"); //added
        dojo.require("dijit.form.CheckBox"); //added
        dojo.require("dijit.form.FilteringSelect");//added
        dojo.require("dijit.form.Textarea");//added

        dojo.require("dijit.Declaration");
        dojo.require("dijit.Editor");
        dojo.require("dijit._editor.plugins.LinkDialog");

        dojo.require("dijit.ProgressBar");
        
        dojo.require("dojox.grid.Grid");
        dojo.require("dojox.grid._data.model");
        dojo.require("dijit.ColorPalette");
        dojo.require("dijit._Calendar");

        // Global var for new mail pane
        var paneId=1;
                
        // for "new message" tab closing
        function testClose(pane,tab){
          return confirm("Are you sure you want to leave your changes?");
        }

        var numMails;
        var updateFetchStatus = function(x){
            if (x == 0) {
                dijit.byId('fakeFetch').update({ indeterminate: false });
                return;
            }
            dijit.byId('fakeFetch').update({ progress: x });
            if (x == numMails){
                dojo.fadeOut({ node: 'fetchMail', duration:800,
                    // set progress back to indeterminate. we're cheating, because this
                    // doesn't actually have any data to "progress"
                    onEnd: function(){ 
                        dijit.byId('fakeFetch').update({ indeterminate: true });
                        dojo.byId('fetchMail').style.visibility='hidden'; // remove progress bar from tab order
                    }
                }).play();
            }
        }
        var fakeReport = function(percent){
            // FIXME: can't set a label on an indeterminate progress bar
            // like if(this.indeterminate) { return " connecting."; }
            return "Fetching: "+(percent*this.maximum) + " of " + this.maximum + " messages.";
        }
        var fakeDownload = function(){
            dojo.byId('fetchMail').style.visibility='visible';
            numMails = Math.floor(Math.random()*10)+1;
            dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 });
            dojo.fadeIn({ node: 'fetchMail', duration:300 }).play();
            for (var i=0; i<=numMails; i++){
                setTimeout("updateFetchStatus("+i+")",((i+1)*(Math.floor(Math.random()*100)+400)));
            }
        }

       var mailView = {
          cells: [[
                {name: 'From', field:'sender',width:"25%"}, 
                {name: 'Subject', field:'label',width:"65%"},
                {name: 'Date', field:'sent',width:"10%"}
            ]]
        };

        var layout = [ mailView ];

        function displayMailMessage(evt) {
           var msg = mailGrid.model.getDatum(evt.rowIndex,6);
           dijit.byId("message").setContent(msg);
        } 
    </script>

    <style type="text/css">
        @import "/dojoroot/dojo/resources/dojo.css";
        @import "/dojoroot/dijit/themes/soria/soria.css";
        @import "/dojoroot/dijit/demos/mail/mail.css";

        @import "/dojoroot/dojox/grid/_grid/tundraGrid.css";
        
        #grid { 
            width: 100%;
        }
    </style>

</head>
<body class="soria">
    <div dojoType="dojo.data.ItemFileReadStore" jsId="addrStore"
        url="address.json">
    </div>

    <div dojoType="dojo.data.ItemFileReadStore" jsId="folderStore"
        url="folder.json">
    </div>
        
    <div dojoType="dojo.data.ItemFileReadStore" jsId="mailStore"
        url="mail.json">
    </div>

    <div dojoType="dojox.grid.data.DojoData" jsId="mailModel" 
        rowsPerPage="20" store="mailStore" query="{ type: 'none'}"
        clientSort="true">
    </div>

    <div dojoType="dijit.layout.LayoutContainer" id="main">

        <!-- toolbar with new mail button, etc. -->
        <div dojoType="dijit.Toolbar" layoutAlign="top" style="height:25px;">
            <!--  Step 3: Add Toolbar -->
            <button id="getMail" dojoType="dijit.form.ComboButton"
                iconClass="mailIconGetMail">
                <script type="dojo/method" event="onClick">
                    fakeDownload();
                </script>
                <span>Get Mail</span>
                <ul dojoType="dijit.Menu">
                    <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li>
                    <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li>
                </ul>
            </button>
            <span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span>

            <button id="newMsg" dojoType="dijit.form.Button" iconClass="mailIconNewMessage">
                New Message
                <script type="dojo/method" event="onClick">
                    /* make a new tab for composing the message */
                    var newTab = new mail.NewMessage({id: "new"+paneId  }).container;
                    dojo.mixin(newTab,
                            {
                                    title: "New Message #" + paneId++,
                                    closable: true,
                                    onClose: testClose
                            }
                    );
                    tabs.addChild(newTab);
                    tabs.selectChild(newTab);
                </script>
            </button>
            <span dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</span>

            <button id="options" dojoType="dijit.form.Button" iconClass="mailIconOptions">
            Options 
                <script type="dojo/method" event="onClick">
                    dijit.byId('optionsDialog').show(); 
                </script>
            </button>
            <div dojoType="dijit.Tooltip" connectId="options">Set various options</div>
        </div>
        
        <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" 
             id="footer" align="left">
            <span style="float:right;">DojoMail v0.9b (demo only)</span>
            <!-- Start Step 5 -->
            <div id="fetchMail" style="opacity:0;visibility:hidden">
                <div annotate="true" id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"></div>
            </div>
        </div>

        <div dojoType="dijit.layout.TabContainer" 
            id="tabs" jsId="tabs" layoutAlign="client">

            <!-- main section with tree, table, and preview -->
            <div dojoType="dijit.layout.SplitContainer"
                orientation="horizontal"
                sizerWidth="5"
                activeSizing="0"
                title="Inbox"
            >
        
                <div dojoType="dijit.layout.AccordionContainer" sizeMin="20" sizeShare="20">
                    <div dojoType="dijit.layout.AccordionPane" title="Folders">
                        <div dojoType="dijit.Tree" id="mytree" store="folderStore" childrenAttr="folders"
                            labelAttr="label2" query="{type:'folder'}" label="Folders">
                            <script type="dojo/method" event="onClick" args="item">
                                if(!item){
                                    return; // top level node in tree doesn't correspond to any item
                                }

                                /* filter the message list to messages in this folder */
                                var newMailModel = new dojox.grid.data.DojoData();
                                newMailModel.rowsPerPage = 20;
                                newMailModel.store = mailStore; 
                                newMailModel.query = {
                                    type: "message",
                                    folder: mailStore.getValue(item, "id")
                                };
                                newMailModel.clientSort = true;
                                console.debug("Set folder to "+mailStore.getValue(item, "id"));
                                
                                mailGrid.setModel(newMailModel);
                            </script>
                            
                            <script type="dojo/method" event="getIconClass" args="item">
                                return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments";
                            </script>
                        </div>
                    </div>
                    
                    <div dojoType="dijit.layout.AccordionPane" title="Address Book">
                        <div dojoType="dijit.Tree" id="addrTree" store="addrStore"
                                labelAttr="label1" query="{type: 'address'}">
                                <script type="dojo/method" event="getIconClass" args="item">
                                        var specifiedIcon = item && mailStore.getValue(item, "icon");
                                        return specifiedIcon || "mailIconFolderDocuments";
                                </script>
                        </div>
                    </div>
                </div>
                
                <div dojoType="dijit.layout.SplitContainer"
                    id="rightPane"
                    orientation="vertical"
                    sizerWidth="5"
                    activeSizing="0"
                    sizeMin="50" sizeShare="85"
                >
                    <div id="listPane" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
                        <div id="grid" dojoType="dojox.Grid" jsId="mailGrid" structure="layout" model="mailModel"
                             onRowClick="displayMailMessage">
                        </div>
                    </div>
                    
                    <div id="message" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="80">
                        Message will go here
                    </div>
                </div> <!--  End right hand side split container -->
                    
            </div><!-- End entire-screen split container -->
            

        </div> <!--  End tab container -->
    </div> <!--  End layout container -->

    <div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
        <table> 
        <tr><td style="text-align:right;"><label for="option1">Transport type:</label></td><td>
        <select id="option1" dojoType="dijit.form.FilteringSelect">
            <option value="pop3">POP3</option>
            <option value="imap">IMAP</option>
        </select></td></tr>
        <tr><td style="text-align:right;"><label for="option2">Server:</label></td><td><input id="option2" dojoType="dijit.form.TextBox" type="text">
        </td></tr>
    
        <tr><td style="text-align:right;"><input type="checkbox" id="fooCB" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB">Leave messages on Server</label></td></tr>
        <tr><td style="text-align:right;"><input type="checkbox" id="fooCB2" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB2">Remember Password</label></td></tr>
    
        <tr><td colspan="2" style="text-align:center;">
        <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk">OK</button>
        <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel">Abort</button>
        </td></tr>
        </table>
    </div>  

    <div dojoType="dijit.Declaration" widgetClass="mail.NewMessage">
        <div dojoType="dijit.layout.LayoutContainer" dojoAttachPoint="container"
                title="Composing..." closeable="true">
            <div dojoType="dijit.layout.LayoutContainer" layoutAlign="top"
                    style="overflow: visible; z-index: 10; color:#666; ">
                <table width=100%>
                    <tr style="padding-top:5px;">
                        <td style="padding-left:20px; padding-right: 8px; text-align:right;">
                             <label for="${id}_to">To:</label>
                        </td>
                        <td width=100%>
                            <select dojoType="dijit.form.ComboBox"
                                         id="${id}_to" hasDownArrow="false">
                                <option></option>
                                <option>adam@yahoo.com</option>
                                <option>barry@yahoo.com</option>
                                <option>bob@yahoo.com</option>
                                <option>cal@yahoo.com</option>
                                <option>chris@yahoo.com</option>
                                <option>courtney@yahoo.com</option>
                           </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 20px; padding-right:8px; text-align:right;">
                              <label for="${id}_subject">Subject:</label>
                        </td>
                        <td width=100%>
                            <select dojoType="dijit.form.ComboBox"
                                         id="${id}_subject" hasDownArrow="false">
                                <option></option>
                                <option>progress meeting</option>
                                <option>reports</option>
                                <option>lunch</option>
                                <option>vacation</option>
                                <option>status meeting</option>
                            </select>
                       </td>
                    </tr>
                </table>
            <hr noshade size="1">
            </div>
                           
            <div dojoType="dijit.layout.LayoutContainer"
                    layoutAlign="bottom" align=center>
                <button dojoType="dijit.form.Button"
                              iconClass="mailIconOk">Send</button>
                 <button dojoType="dijit.form.Button"
                               iconClass="mailIconCancel">Cancel</button>
            </div>
            <!-- new messase part -->
            <div dojoType="dijit.layout.LayoutContainer" layoutAlign="client">
                <div dojoType="dijit.layout.ContentPane" href="newMail.html"></div>
            </div>   
        </div>
    </div>
    
    <!--div dojoType="mail.newMessage" id="myNewMessage"></div-->           
</body></html>